<template>
  <div class="container">
    <el-dialog
      top="6vh"
      width="800px"
      v-loading="loading"
      :visible="showDialog"
      @open="showQuestions"
      title="题目预览"
      @close="closeDialog"
    >
      <el-row>
        <el-col :span="6"
          >【题型】：{{ detailInfo.questionType | formatDifficulty }}</el-col
        >
        <el-col :span="6">【编号】：{{ detailInfo.id }}</el-col>
        <el-col :span="6"
          >【难度】：{{ detailInfo.difficulty | formatType }}</el-col
        >
        <el-col :span="6">【标签】：{{ detailInfo.tags }}</el-col>
      </el-row>
      <el-row style="margin: 20px 20px 0 0">
        <el-col :span="6">【学科】：{{ detailInfo.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ detailInfo.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ detailInfo.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <div v-html="detailInfo.question"></div>
      <div v-if="detailInfo.questionType !== '3'">
        <div style="margin-bottom: 10px">
          {{ detailInfo.questionType | formatType }}
          选项：（以下选中的选项为正确答案）
        </div>
        <div v-for="item in detailInfo.options" :key="item.code">
          {{ item.code }} :
          <el-radio
            :value="item.isRight"
            v-if="detailInfo.questionType === '1'"
            :label="1"
          >
            {{ item.title }}</el-radio
          >
          <el-checkbox
            :value="item.isRight ? true : false"
            v-if="detailInfo.questionType === '2'"
          >
            {{ item.title }}</el-checkbox
          >
        </div>
      </div>
      <hr />
      【参考答案】：<el-button type="danger" @click="previewVideo" size="small"
        >视频答案预览</el-button
      >
      <div v-show="play" class="video">
        <video ref="video" :src="detailInfo.videoURL" controls></video>
      </div>
      <hr />
      【答案解析】：
      <div style="display: inline-block" v-html="detailInfo.answer"></div>
      <hr />
      【题目备注】：{{ detailInfo.remarks }}

      <template #footer>
        <el-button @click="closeDialog" type="primary" size="small"
          >关闭</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { difficulty, questionType } from '@/api/hmmm/constants.js'
export default {
  filters: {
    formatDifficulty (value) {
      if (value) return difficulty.find(item => item.value === +value).label
    },
    formatType (value) {
      if (value) return questionType.find(item => item.value === +value).label + '题'
    }
  },
  data () {
    return {
      loading: false,
      play: false,
      detailInfo: {}
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    questionInfo: {
      type: Object,
      default: () => {
      }
    }
  },
  created () {
    // console.log(this.questionInfo)
  },
  methods: {
    previewVideo () {
      this.play = true
      this.$refs.video.play()
    },
    closeDialog () {
      this.$emit('update:showDialog', false)
      this.play = false
      this.$refs.video.pause()
    },
    async showQuestions () {
      this.loading = true
      const { data } = await detail({ id: this.questionInfo.id })
      // console.log(data)
      this.detailInfo = data
      // console.log(this.detailInfo)

      this.loading = false
    }
  }
}
</script>

<style scoped lang='less'></style>
